<script lang="ts" setup="">
import {
	InboxOutlined,
	PlusOutlined,
	UploadOutlined,
} from '@ant-design/icons-vue'
import { ref } from 'vue'
import type { UploadChangeParam, UploadProps } from 'ant-design-vue'
import { message } from 'ant-design-vue'

const fileList1 = ref<UploadProps['fileList']>([
	{
		uid: '-1',
		name: 'xxx.png',
		status: 'done',
		url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
		thumbUrl:
			'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	},
	{
		uid: '-2',
		name: 'yyy.png',
		status: 'done',
		url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
		thumbUrl:
			'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	},
])

let fileList = ref([])
const handle_Change = (info: UploadChangeParam) => {
	const status = info.file.status
	if (status !== 'uploading') {
		console.log(info.file, info.fileList)
	}
	if (status === 'done') {
		message.success(`${info.file.name} file uploaded successfully.`)
	} else if (status === 'error') {
		message.error(`${info.file.name} file upload failed.`)
	}
}
const handle_Drop = (e: DragEvent) => {
	console.log(e)
}

function getBase64(file: File) {
	return new Promise((resolve, reject) => {
		const reader = new FileReader()
		reader.readAsDataURL(file)
		reader.onload = () => resolve(reader.result)
		reader.onerror = error => reject(error)
	})
}

const previewVisible = ref(false)
const previewImage = ref('')
const previewTitle = ref('')

const fileList2 = ref<UploadProps['fileList']>([
	{
		uid: '-1',
		name: 'image.png',
		status: 'done',
		url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	},
	{
		uid: '-2',
		name: 'image.png',
		status: 'done',
		url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	},
	{
		uid: '-3',
		name: 'image.png',
		status: 'done',
		url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	},
	{
		uid: '-4',
		name: 'image.png',
		status: 'done',
		url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	},
	{
		uid: '-xxx',
		percent: 50,
		name: 'image.png',
		status: 'uploading',
		url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
	},
	{
		uid: '-5',
		name: 'image.png',
		status: 'error',
	},
])

const handleCancel = () => {
	previewVisible.value = false
	previewTitle.value = ''
}
const handlePreview = async (file: UploadProps['fileList'][number]) => {
	if (!file.url && !file.preview) {
		file.preview = (await getBase64(file.originFileObj)) as string
	}
	previewImage.value = file.url || file.preview
	previewVisible.value = true
	previewTitle.value =
		file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
}
</script>

<template>
	<div>
		<a-upload
			v-model:file-list="fileList1"
			action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
			list-type="picture"
			class="upload-list-inline"
		>
			<a-button>
				<upload-outlined></upload-outlined>
				upload
			</a-button>
		</a-upload>
		<a-divider />
		<div class="draggable-upload mt-10">
			<a-upload-dragger
				v-model:fileList="fileList"
				name="file"
				:multiple="true"
				action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
				@change="handle_Change"
				@drop="handle_Drop"
			>
				<p class="ant-upload-drag-icon">
					<inbox-outlined></inbox-outlined>
				</p>
				<p class="ant-upload-text">点击或拖拽上传文件</p>
				<p class="ant-upload-hint">
					支持单文件和多文件上传 禁止上传公司或私人文件
				</p>
			</a-upload-dragger>
		</div>
		<a-divider />
		<div class="clearfix mt-10">
			<a-upload
				v-model:file-list="fileList2"
				action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
				list-type="picture-card"
				@preview="handlePreview"
			>
				<div v-if="fileList2.length < 8">
					<plus-outlined />
					<div style="margin-top: 8px">Upload</div>
				</div>
			</a-upload>
			<a-modal
				:visible="previewVisible"
				:title="previewTitle"
				:footer="null"
				@cancel="handleCancel"
			>
				<img alt="example" style="width: 100%" :src="previewImage" />
			</a-modal>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.upload-list-inline :deep(.ant-upload-list-item) {
	float: left;
	width: 200px;
	margin-right: 8px;
}

.upload-list-inline [class*='-upload-list-rtl'] :deep(.ant-upload-list-item) {
	float: right;
}

.draggable-upload {
	width: 500px;
	height: 300px;
}

.ant-upload-select-picture-card i {
	font-size: 32px;
	color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
	margin-top: 8px;
	color: #666;
}
</style>
